<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/index-min.css">
</head>

<body>
    <ul id="menu">
        <li data-menuanchor="page1" class="active"><a href="#page1"></a></li>
        <li data-menuanchor="page2"><a href="#page2"></a></li>
        <li data-menuanchor="page3"><a href="#page3"></a></li>
        <li data-menuanchor="page4"><a href="#page4"></a></li>
        <li data-menuanchor="page5"><a href="#page5"></a></li>
    </ul>
    <div class="header">
        <div class="logo">
            <a href="index.html">
                <img src="http://www.bufantec.com/site/sheying/images/logo.png" alt="">
            </a>
        </div>
        <ul class="nav-list">
            <li class="nav-item  active">
                <a href="index.html">
                    首页
                </a>
                <span></span>
            </li>
            <li class="nav-item">
                <a href="about.html">
                    关于
                </a>
                <span></span>
            </li>
            <li class="nav-item">
                <a href="photo.html">
                    摄影
                </a>
                <span></span>
            </li>
            <li class="nav-item">
                <a href="news.html">
                    新闻
                </a>
                <span></span>
            </li>
            <li class="nav-item">
                <a href="contact.html">
                    联系
                </a>
                <span></span>
            </li>
            <li class="nav-item search">
                <img class="cursor" src="http://www.bufantec.com/site/sheying/images/search.png" alt="">
            </li>
        </ul>

    </div>

    <div class="header-m">
        <div class="logo">
            <img src="http://www.bufantec.com/site/sheying/images/logo.png" alt="">
        </div>
        <div class="open-btn">
            <span class="line one"></span>
            <span class="line two"></span>
            <span class="line three"></span>
        </div>

        <ul class="list">
            <li class="item">
            </li>
            <li class="item">
                <a href="index.html">首页</a>
            </li>
            <li class="item">
                <a href="about.html">关于</a>
            </li>
            <li class="item">
                <a href="news.html">新闻</a>
            </li>
            <li class="item">
                <a href="photo.html">摄影</a>
            </li>
            <li class="item">
                <a href="contact.html">联系</a>
            </li>
        </ul>
    </div>

    <div id="fullpage">
        <div class="banner section">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="http://www.bufantec.com/site/sheying/images/banner.jpg" alt="">
                        <div class="banner-text text01 ani" swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="0.6s">
                            <h1>Natrix<br>Sans</h1>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="http://www.bufantec.com/site/sheying/images/banner2.jpg" alt="">
                        <div class="banner-text text02 ani" swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="0.6s">
                            <h1>CAP</h1>
                            <p>捕捉扣人心弦的瞬间<br>定格人间万象大光圈</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="http://www.bufantec.com/site/sheying/images/banner3.jpg" alt="">
                        <div class="banner-text text03 ani" swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="0.6s">
                            <h1>CREATE</h1>
                            <p>打造属于你的独特艺术</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="project section">
            <ul class="list">
                <li class="item">
                    <span class="title-en">PROJECTS</span>
                    <span class="title-cn">摄影欣赏</span>
                    <p class="type">
                        <a href="#" class="text active">全部</a>
                        <span class="mark">/</span>
                        <a href="#" class="text">人物摄影</a>
                        <span class="mark">/</span>
                        <a href="#" class="text">风景摄影</a>
                        <span class="mark">/</span>
                        <a href="#" class="text">建筑摄影</a>
                        <span class="mark">/</span>
                        <a href="document-photo.html" class="text">纪实摄影</a>
                        <span class="mark">/</span>
                        <a href="#" class="text">更好</a>
                    </p>
                </li>
                <li class="item before-active">
                    <div class="text-holder animated bounceInUp">
                        <p class="title">70年保时捷——RETER LINDBERGH背后</p>
                        <p class="desc">作为跑车制造推出的“保时捷人次计划”的一部分，目的是让
                            年轻的艺术家有机会与来自领域的伟人合作......</p>
                        <a class="link-to-photo" href="photo.html">+</a>
                    </div>
                </li>
                <li class="item before-active">
                    <div class="text-holder animated bounceInUp">
                        <p class="title">70年保时捷——RETER LINDBERGH背后</p>
                        <p class="desc">作为跑车制造推出的“保时捷人次计划”的一部分，目的是让
                            年轻的艺术家有机会与来自领域的伟人合作......</p>
                        <a class="link-to-photo" href="photo.html">+</a>
                    </div>
                </li>
                <li class="item before-active">
                    <div class="text-holder animated bounceInUp">
                        <p class="title">70年保时捷——RETER LINDBERGH背后</p>
                        <p class="desc">作为跑车制造推出的“保时捷人次计划”的一部分，目的是让
                            年轻的艺术家有机会与来自领域的伟人合作......</p>
                        <a class="link-to-photo" href="photo.html">+</a>
                    </div>
                </li>
                <li class="item before-active">
                    <div class="text-holder animated bounceInUp">
                        <p class="title">70年保时捷——RETER LINDBERGH背后</p>
                        <p class="desc">作为跑车制造推出的“保时捷人次计划”的一部分，目的是让
                            年轻的艺术家有机会与来自领域的伟人合作......</p>
                        <a class="link-to-photo" href="photo.html">+</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="recommand section">
            <ul class="list">
                <li class="item">
                    <span class="title-en">RECOMMEND</span>
                    <span class="title-cn">每日推荐</span>
                </li>
                <li class="item">
                    <div class="img-holder">
                        <p class="desc-text">MAGICAL FOREST</p>
                    </div>
                    <div class="img-holder2">
                        <p class="desc-text">BLACK COOL CAT</p>
                    </div>
                </li>
                <li class="item">
                    <div class="img-holder">
                        <p class="desc-text">SILENT BELIEVER</p>
                    </div>
                    <div class="img-holder2">
                        <p class="desc-text">RUNNING BUFFALO</p>
                    </div>
                </li>
                <li class="item">
                    <div class="img-holder">
                        <p class="desc-text">MAN IN THE GRASS</p>
                    </div>
                    <div class="img-holder2">
                        <p class="desc-text">BEAUTIFUL WOMAN</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="about section">
            <ul class="list">
                <li class="item">
                    <span class="title-en">ABOUT&nbsp&nbspUS</span>
                    <span class="title-cn">关于我们</span>
                </li>
                <li class="item">
                </li>
                <li class="item">
                    <div class="top-box">
                        <h1>WESTON</h1>
                        <p class="top-text-cn">已经有超过五百万的摄影爱好者入驻了WESTON
                            在这里，发现基于共同兴趣的同好，鼓励原创和分享精神
                            除了美好的摄影和技能，我们更在意影像背后价值观的认同</p>
                        <p class="top-text-en">
                            MORE THAN FIVE MILLION PHOTOGRAPHERS HAVE SETTLED IN WESTON
                            HERE, I FOUND THAT BASED ON COMMON INTERESTS, ENCOURAGE ORIGINALITY AND SHARING SPIRIT.
                        </p>
                    </div>
                    <div class="bottom-box">
                        <img src="http://www.bufantec.com/site/sheying/images/about2.jpg" alt="">
                        <div class="text-holder">
                            <p class="bottom-text-cn">我们一直在制作美丽的网站</p>
                            <p class="bottom-text-en">
                                WE'VE BEEN CRAFTING BEAUTIFUL WEBSITES, LAUNCHING STUNNING
                                BRANDS AND MAKING CLIENTS HAPPY FOR YEARS.QUISQUE EUISMOD LOBORTIS ALIQUAM.
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="contact section">
            <div class="title">
                <span class="title-en">CONTACT</span>
                <span class="title-cn">联系我们</span>
            </div>
            <div class="info">
                <h2>WESTON</h2>
                <p>地址：河南省郑州市金水区南阳路升龙汇金2108<br>
                    邮编：450000<br>
                    电话：400-887-3482<br>
                    手机：1763224789 / 13347699468<br>
                    邮箱：37654219@ｑｑ.com<br>
                    传真：000-66762390
                </p>
                <img src="http://www.bufantec.com/site/sheying/images/footer2.png" alt="">
            </div>
            <ul class="ipt">
                <li>
                    <input placeholder="姓名" type="text">
                </li>
                <li>
                    <input placeholder="电话" type="text">
                </li>
                <li>
                    <input placeholder="邮政" type="text">
                </li>
                <li>
                    <input placeholder="内容" type="text" class="long-input">
                </li>
                <a class="update" href="">提交</a>
            </ul>
        </div>
    </div>

    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/swiper-bundle.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <script src="js/fullpage.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>

</html>